<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" width="70%" destroy-on-close @closed="$emit('closed')" align-center>
        <el-button type="primary" @click="print">打印</el-button>
        <el-main>
            <div class="printMain" ref="printMain">
                <div v-for="(item,index) in detail.list" :key="index">
                    <div v-if="index>=1" style="page-break-after: always"></div>
                    <div  style="display:flex;align-items: flex-start;">
                        <table style="border-collapse: collapse;width:50vw;border-spacing: 0;">
                            <!-- 两个生产 -->
                            <thead style="margin-top: 100px; display: table-header-group;">
                                <tr style="display:block;margin:30px;"></tr>
                                <tr>
                                    <th class="thCss" colspan="6">
                                        <div class="topHeader">{{detail.info.apply_name}} {{detail.info.date}}生产扫码数据统计</div>
                                        <div class="contont">
                                            <div class="top">
                                                <div class="list">部门:{{item.staffInfo.dept_name}}</div>
                                                <div class="list">姓名:{{item.staffInfo.name}}</div>
                                                <div class="list" style="border:none">岗位:{{item.staffInfo.jobs_name}}</div>
                                            </div>
                                            <div class="bottom">
                                                <div>户名:{{item.staffInfo.bank_name}}</div>
                                                <div>银行卡号:{{item.staffInfo.bank_card}}</div>
                                            </div>
                                        </div>
                                    </th>
                                </tr>
                                <tr v-if="item.produce_list!=''">
                                    <th class="thCss">日期</th>
                                    <th class="thCss" style="width:130px" v-if="type==1">批次号</th>
                                    <th class="thCss" style="width:130px" v-else>工厂货号</th>
                                    <th class="thCss">工序</th>
                                    <th class="thCss">数量</th>
                                    <th class="thCss">单价</th>
                                    <th class="thCss">金额</th>
                                </tr>
                                <tr v-if="item.develop_list!=''">
                                    <th class="thCssTwo" style="width:20%">日期</th>
                                    <th class="thCssTwo" style="width:30%">初版</th>
                                    <th class="thCssTwo" style="width:30%">修改版</th>
                                    <th class="thCssTwo" style="width:20%">放码</th>
                                </tr>
                            </thead>
                            <tbody v-if="item.produce_list!=''">
                                <tr v-for="(item1,index1) in item.one" :key="index1">
                                    <td class="thCss">{{item1.date}}</td>
                                    <td class="thCss" style="width:130px">{{item1.batch_number}}</td>
                                    <td class="thCss">{{item1.two_process_title}}</td>
                                    <td class="thCss">{{item1.num}}</td>
                                    <td class="thCss">{{item1.price}}</td>
                                    <td class="thCss">{{item1.total_amount}}</td>
                                    <td style="width:1vw"></td>
                                </tr>
                                <div style="page-break-before: always;"></div>
                            </tbody>
                            <!-- 开发 -->
                            <tbody v-if="item.develop_list!=''">
                                <tr v-for="(item3,index3) in item.develop_list" :key="index3">
                                    <td class="thCssTwo">{{item3.date_name}}</td>
                                    <td class="thCssTwo">
                                        <div v-for="(item31,index31) in item3.data.first" :key="index31">{{item31}}</div>
                                    </td>
                                    <td class="thCssTwo">
                                        <div v-for="(item31,index31) in item3.data.edition" :key="index31">{{item31}}</div>
                                    </td>
                                    <td class="thCssTwo">
                                        <div v-for="(item31,index31) in item3.data.grading" :key="index31">{{item31}}</div>
                                    </td>
                                </tr>
                                <div style="page-break-before: always;"></div>
                            </tbody>
                        </table>
                        <!-- <div style="width:100%;height:50px;display:flex"></div> -->
                        <table style="border-collapse: collapse;width: 49vw;border-spacing: 0;">
                            <thead style="margin-top: 100px; display: table-header-group;">
                                <tr style="display:block;margin:30px;"></tr>
                                <tr>
                                    <th class="thCss" colspan="6">
                                        <div class="topHeader">{{detail.info.apply_name}} {{detail.info.date}}生产扫码数据统计</div>
                                        <div class="contont">
                                            <div class="top">
                                                <div class="list">部门:{{item.staffInfo.dept_name}}</div>
                                                <div class="list">姓名:{{item.staffInfo.name}}</div>
                                                <div class="list" style="border:none">岗位:{{item.staffInfo.jobs_name}}</div>
                                            </div>
                                            <div class="bottom">
                                                <div>户名:{{item.staffInfo.bank_name}}</div>
                                                <div>银行卡号:{{item.staffInfo.bank_card}}</div>
                                            </div>
                                        </div>
                                    </th>
                                </tr>
                                <tr v-if="item.produce_list!=''">
                                    <th class="thCss">日期</th>
                                    <th class="thCss" style="width:130px" v-if="type==1">批次号</th>
                                    <th class="thCss" style="width:130px" v-else>工厂货号</th>
                                    <th class="thCss">工序</th>
                                    <th class="thCss">数量</th>
                                    <th class="thCss">单价</th>
                                    <th class="thCss">金额</th>
                                </tr>
                                <tr v-if="item.develop_list!=''">
                                    <th class="thCssTwo" style="width:20%">日期</th>
                                    <th class="thCssTwo" style="width:30%">初版</th>
                                    <th class="thCssTwo" style="width:30%">修改版</th>
                                    <th class="thCssTwo" style="width:20%">放码</th>
                                </tr>
                            </thead>
                            <tbody v-if="item.produce_list!=''">
                                <tr v-for="(item2,index2) in item.two" :key="index2">
                                    <td class="thCss">{{item2.date}}</td>
                                    <td class="thCss" style="width:130px">{{item2.batch_number}}</td>
                                    <td class="thCss">{{item2.two_process_title}}</td>
                                    <td class="thCss">{{item2.num}}</td>
                                    <td class="thCss">{{item2.price}}</td>
                                    <td class="thCss">{{item2.total_amount}}</td>
                                </tr>
                                <div style="page-break-before: always;"></div>
                            </tbody>
                            <tbody v-if="item.develop_list!=''">
                                <tr v-for="(item3,index3) in item.develop_list" :key="index3">
                                    <td class="thCssTwo">{{item3.date_name}}</td>
                                    <td class="thCssTwo">
                                        <div v-for="(item31,index31) in item3.data.first" :key="index31">{{item31}}</div>
                                    </td>
                                    <td class="thCssTwo">
                                        <div v-for="(item31,index31) in item3.data.edition" :key="index31">{{item31}}</div>
                                    </td>
                                    <td class="thCssTwo">
                                        <div v-for="(item31,index31) in item3.data.grading" :key="index31">{{item31}}</div>
                                    </td>
                                </tr>
                                <div style="page-break-before: always;"></div>
                            </tbody>
                        </table>
                    </div>
                    <table style="border-collapse: collapse;margin-top:20px">
                        <tr>
                            <th class="thCss">合计</th>
                            <th class="thCss">{{item.report_amount}}</th>
                            <th v-if="item.produce_list!=''" class="thCss" style="width:220px">件数合计:{{item.num}}</th>
                            <th v-if="item.produce_list!=''" class="thCss" style="width:220px">金额合计:{{item.report_amount}}</th>
                        </tr>
                        <tr>
                            <td class="thCss">底薪</td>
                            <td class="thCss">{{item.basic_salary}}</td>
                        </tr>
                        <tr>
                            <td class="thCss">房补</td>
                            <td class="thCss">{{item.housing_allowance_money}}</td>
                        </tr>
                        <tr>
                            <td class="thCss">餐补</td>
                            <td class="thCss">{{item.meal_allowance_money}}</td>
                        </tr>
                        <tr>
                            <td class="thCss">其他补扣</td>
                            <td class="thCss">{{item.deduction_amount}}</td>
                        </tr>
                        <tr>
                            <th class="thCss">总合计</th>
                            <th class="thCss">{{item.total_amount}}</th>
                        </tr>
                    </table>
                </div>
            </div>
        </el-main>
    </el-dialog>
</template>

<script>
	import print from '@/utils/print'
	export default {
		name: 'print',
		data() {
			return {
                mode: "add",
				titleMap: {
					add: '打印工艺单',
					show: '打印',
					over: '退货'
				},
				visible: false,
				isSaveing: false,
                detail:{},
                show:false,
                type:""
            }
		},
		methods: {
            //显示
			open(mode='add'){
				this.mode = mode;
				this.visible = true;
				return this
			},
            async setData(data){
                this.type = data.type
                var res = await this.$API.print.gongziPrint.get({staff_id:data.staff_id,time_range:data.time_range,type:data.type});
                this.detail = res.data.rows
                res.data.rows.list.map(item=>{
                    const length = item.produce_list.length;
                    const midPoint = Math.ceil(length / 2);
                    item.one = item.produce_list.slice(0, midPoint);
                    item.two = item.produce_list.slice(midPoint, length);
                })
			},
			print(){
				//直接传入REF或者querySelector
				print(this.$refs.printMain)
                setTimeout(()=>{
                    this.visible = false
                },500)
			},
		}
	}
</script>

<style scoped lang="scss">
div{
    color: #000;
}
.topHeader{
    text-align: center;
    font-size: 18px;
    margin-bottom: 10px;
}
.contont{
    font-size: 20px;
    .top{
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top: 1px solid #000000;
        border-bottom: 1px solid #000000;
        .list{
            padding: 10px 0;
            width: 33%;
            border-right: 1px solid #000000;
            text-align: center;
        }
    }
    .bottom{
        text-align: start;
        margin-left: 20px;
    }
}
.thCss{
    border:1px solid #000000;
    width: 110px;
    text-align: center;
}
.thCssTwo{
    border:1px solid #000000;
    text-align: center;
    
}
table{
    tbody{
        font-size: 13px;
        tr {
            page-break-inside: avoid;
            -webkit-region-break-inside: avoid; 
        }
        tr:last-child{
            page-break-after: avoid;
            
        }
    }
} 
</style>
